<script setup lang="ts">
import { Api } from '../assets/api/index';
import { ref, onMounted,watch} from 'vue';
import type { HomeTitle, VideoList, ListItem } from '../typings'
import LeftCommodity from '@/components/HomeComps/LeftCommodity.vue';
import { RouterView,useRouter} from 'vue-router'

const router = useRouter()
let titleList = ref<Array<HomeTitle>>([])
let videoListData = ref<VideoList>()
let letfArr = ref<Array<ListItem>>([])
let rightArr = ref<Array<ListItem>>([])
let isShowLoading = ref(false)

const getHomeTitleData = async () => {
  let { data } = await Api.getHomeTitle()
  titleList.value = data
  console.log(titleList.value);
}

const getHomeVideoData = async () => {
  isShowLoading.value = true
  let { data } = await Api.getHomeVideo()
  videoListData.value = data.data
  console.log(videoListData);
  videoListData.value.list.map((item, i) => {



    if (i % 2 == 0) {
      letfArr.value.push(item)
    } else {
      rightArr.value.push(item)
    }
  })

  console.log(letfArr);
  isShowLoading.value = false


}

onMounted(() => {
  getHomeTitleData(),
    getHomeVideoData()
})


const goToSearchView = (text:string)=>{
  
  router.push({
    path:'/search',
    query:{
      text:text
    }
  })
}

</script>

<template>
  <keep-alive>
  <RouterView>
    <div class="home">


      <div class="title">
        <van-grid :column-num="5" :border="false" icon-size="50px" gutter="-20px">
          <van-grid-item @click="goToSearchView(t.title)" v-for="(t, i) in titleList" :key="i" :icon="t.image" :text="t.title" />
        </van-grid>

        <div class="skeleton w-full h-72 flex flex-wrap " v-show="titleList.length == 0">
          <van-skeleton  class=" w-1/5" v-for="index in 14" :key="index">
            <template #template>
              <div :style="{ display: 'flex',flexDirection:'column', width: '100%' }">
                <van-skeleton avatar-size="50px"  avatar :row="1" />
                <div :style="{ flex: 1,marginTop:'10px',marginLeft:'15px' }">
                  <van-skeleton-paragraph row-width="180%" />
                </div>
              </div>
            </template>
          </van-skeleton>

        </div>
      </div>


      <div class="content">
        <van-cell>
          <div class="comp-list flex justify-around">
            <div class="left flex flex-col mr-3">
              <LeftCommodity v-for="l, in letfArr" :key="l.itemId" :list="l"></LeftCommodity>
            </div>
            <div class="right  flex flex-col">
              <LeftCommodity v-for="(r, i) in rightArr" :key="r.itemId" :list="r" :currentIndex="i"></LeftCommodity>
            </div>
          </div>
        </van-cell>
        <van-back-top :offset="1000"/>
      </div>


      <LoadingComp v-show="isShowLoading"></LoadingComp>

    </div>
  </RouterView>
  </keep-alive>
</template>

<style lang="scss" scoped>
.home {
  .title {
    min-height: 38vh;
  }
}
</style>
